<template>
  <div>
    <van-overlay :show="showOverlay">
      <div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;">
        <van-loading type="spinner" size="60" vertical>登录中...</van-loading>
      </div>
    </van-overlay>
    <div class="mainbox">
      <div class="content">
        <div class="exit">
          <van-icon size="20" name="cross" @click="close" />
        </div>
        <div class="fword">欢 迎 登 录 杨 婷 的 记 账 tool</div>
        <!-- <img src="@/assets/phone.png" alt="" width="11px" height="18px" class="phone"> -->
        <div class="loginpart">
          <van-icon name="balance-pay" size="50" style="margin-top: 15px;" />
          <div class="sword">杨婷的记账工具</div>
          <van-form @submit="onSubmit">
            <van-field v-model="tel" type="tel" name="手机号" maxlength="11" placeholder="请输入账号"
              :rules="[{ required: true }]" class="input" />
            <van-field v-model="code" type="text" name="密码" maxlength="10" placeholder="请输入密码"
              :rules="[{ required: true }]" />
            <van-button native-type="submit" style="background-image: linear-gradient(to right, #93d7e6, #45b7cb);">
              {{ text }}
            </van-button>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _local } from "@/utils/storage";
import local from "../utils/local";
import {
  compositeQuerySingleIndexDB
} from "../utils/util.js"

export default {
  data() {
    return {
      showOverlay: false,
      text: '登录',
      db: '',
      idb: '',
      tel: "",
      code: "",
      showgetcode: true,
      time: 60,
      checked: false,
      timer: "",
    };
  },
  destroyed() {
    clearInterval(this.timer);
  },
  created () {
    const _this=this
    _this.$store.dispatch('tools/setDb').then(res=>{
      _this.db=res
    })
    _this.$store.dispatch('tools/setIdb').then(res=>{
      _this.idb=res
    })
  },
  methods: {
    close() {
      this.$router.go(-1);
    },
    touse() {
      local.set("tel", this.tel);
      local.set("code", this.code);
      this.$router.push({ path: "/serve" });
    },
    topre() {
      local.set("tel", this.tel);
      local.set("code", this.code);
      this.$router.push({ path: "/privacy" });
    },
    onSubmit() {
      const _this = this;
      if (_this.text === '登录') {
        _this.idb.query_by_index({
          tableName: "users",
          indexName: "number",
          target: _this.tel,
          success: (res) => {
            if (res) {
              compositeQuerySingleIndexDB({
                db: _this.db,
                tableName: 'users',
                compositeQueryIndex: 'numAndpwd',
                IndexValueOne: _this.tel,
                IndexValueTwo: _this.code,
              }).then(result => {
                if (result) {
                  _local.set('isLogin', '1')
                  _this.showOverlay = true
                  setTimeout(() => {
                    _this.showOverlay = false
                    this.$toast('登录成功')
                    _this.$router.push('/home/me')
                  }, 2000);
                } else {
                  this.$toast('登录失败，密码错误')
                }
              })
            } else {
              this.$toast('登录失败，请先注册')
              this.text = '注册'
            }
          },
        });
      } else {
        _this.idb.insert({
          tableName: "users",
          data: {
            number: _this.tel,
            password: _this.code
          },
          success: () => {
            _local.set('isLogin', '1')
            _this.showOverlay = true
            setTimeout(() => {
              _this.showOverlay = false
              this.$toast('登录成功')
              _this.$router.push('/home/me')
            }, 2000);
          },
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
// .phone{
//   position: absolute;
//   left: 20px;
//   bottom: 270px;
//   z-index: 100;
// }
.fword {
  font-size: 20px;
  font-weight: bold;
  margin-top: 25px;
}

.mainbox {
  height: 100%;

  // background: url("~@/assets/loginbi.png") no-repeat;
  // background-size: 100% 100%;
  .content {
    margin: 0 15px;
    height: 520px;

    .exit {
      height: 100px;
      box-sizing: border-box;
      padding-top: 60px;
      padding-left: 10px;
    }

    .loginpart {
      position: relative;
      height: 520px;
      background-color: #fff;
      border-radius: 10px;
      text-align: center;

      img {
        margin-top: 100px;
        height: 55px;
        width: 59px;
      }

      .sword {
        font-size: 14px;
        margin-top: 15px;
      }

      /deep/.van-field {
        box-sizing: border-box;
        padding: 20px 0;
        margin: 0 10px;
        border: none;
        border-bottom: 1px solid #ddd;
        display: block;
        width: 94%;
        margin-top: 20px;

        input {
          text-indent: 1em;
          font-size: 15px;
        }

        .van-field__error-message {
          position: relative;
        }
      }

      .yan {
        position: absolute;
        right: 25px;
        bottom: 185px;
        color: #333;
      }

      .van-button {
        width: 85%;
        border-radius: 25px;
        height: 50px;
        border: none;
        color: #fff;
        font-weight: bold;
        letter-spacing: 5px;
        margin-top: 10px;
      }

      /deep/.van-button--disabled {
        opacity: 1;
      }

      .other {
        margin: 25px 15px 0;
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
        font-size: 12px;
        color: #666;
        text-align: left;

        .van-checkbox {
          width: 40px;
        }

        >div {
          span {
            font-weight: bold;
            color: #333;
          }
        }
      }
    }
  }
}

input::-webkit-input-placeholder {
  color: #999;
}

input::-moz-placeholder {
  color: #999;
}

input:-moz-placeholder {
  color: #999;
}

input:-ms-input-placeholder {
  color: #999;
}
</style>
